<template>
  <div class="login">
    <el-container class="my-login-container" style="">
      <el-main class="my-login-main">
        <div class="login-wrap">
          <h3 class="title">{{title}}</h3>
          <el-row class="login-form" :gutter="20">
            <el-col :span="24">
              <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px"
                class="">
                <el-form-item style="margin-bottom: 10px;">
                  <el-link class="login-tip-title" type="primary">新用户注册</el-link>
                </el-form-item>
                <el-form-item prop="username">
                  <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入手机号">
                    <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-input placeholder="请输入短信验证码" v-model="loginForm.verifyCode" type="text" autocomplete="off">
                    <svg-icon style="vertical-align:-0.5rem;" slot="prefix" icon-class="validCode"
                      class="el-input__icon input-icon" />
                    <el-button slot="append" @click="handleSendSmsCode">{{countForm.countDownText}}</el-button>
                  </el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input type="password" :show-password="true" v-model="loginForm.password"
                    placeholder="请输入密码">
                    <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                  </el-input>
                  <span style="color: #333; font-size: 10px;">密码需包含字母,数字,特殊字符,且长度至少是8位</span>
                </el-form-item>
                <el-form-item prop="confirmPassword">
                  <el-input type="password" :show-password="true" v-model="loginForm.confirmPassword"
                    placeholder="请再次输入密码">
                    <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                  </el-input>
                </el-form-item>
                <el-form-item prop="code">
                  <el-input v-model="loginForm.code" auto-complete="off" placeholder="请输入验证码" style="width: 63%"
                    @keyup.enter.native="handleLogin">
                    <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
                  </el-input>
                  <div class="login-code">
                    <img ref="verifyCode" :src="codeUrl" @click="getCode">
                  </div>
                </el-form-item>
                <el-form-item style="width:100%;">
                  <el-row>
                    <el-col :span="12">
                      <el-link type="primary" @click="handleLogin">返回登录页面</el-link>
                    </el-col>
                    <el-col class="align-right" :span="12">
                      <el-button :loading="loading" size="medium" type="primary" @click.native.prevent="handleRegister">
                        <span v-if="!loading">注 册</span>
                        <span v-else>注 册 中...</span>
                      </el-button>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </el-main>
      <el-aside class="my-login-aside" width="30%">
        <div class="right-content"></div>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
  import {
    getVerifyCode
  } from '@/api/login'
  import {
    isvalidPhone,
    validEmail,
    validatePwd
  } from '@/utils/validate'
  import defaultSettings from '@/settings'
  export default {
    name: 'register',
    data() {
      return {
        title: '欢迎使用永友云',
        codeUrl: '',
        loginForm: {
          loginType: 3,
          username: '',
          password: '',
          confirmPassword: '',
          code: '',
          uuid: '',
          codeGuid: '',
          verifyCode: ''
        },
        loginRules: {
          username: [{
            required: true,
            trigger: 'blur',
            message: '用户名不能为空'
          }],
          password: [{
            required: true,
            trigger: 'blur',
            message: '密码不能为空'
          }],
          confirmPassword: [{
            required: true,
            trigger: 'blur',
            message: '确认密码不能为空'
          }],
          code: [{
            required: true,
            trigger: 'change',
            message: '验证码不能为空'
          }]
        },
        loading: false,
        countForm: {
          count: 60,
          countDownText: '获取验证码',
          isCounting: false
        },
      }
    },
    created() {
      this.getCode();
    },
    methods: {
      getCode() {
        getVerifyCode().then(res => {
          this.codeUrl = res.data.captchaCode
          this.loginForm.uuid = res.data.captchaGUID
        })
      },
      handleLogin() {
        this.$router.push({
          path: '/login'
        })
      },
      handleRegister() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            var checkResult = validatePwd(this.loginForm.password)
            if (checkResult.error) {
              this.$notify.error({
                title: checkResult.error,
              });
              return;
            }
            if (this.loginForm.password != this.loginForm.confirmPassword) {
              this.$notify.error({
                title: '两次输入的密码不一致',
              });
              return;
            }
            var isPhone = isvalidPhone(this.loginForm.username);
            if (!isPhone) {
              this.$notify.error({
                title: '手机号码格式不正确',
              });
              return;
            }
            const user = {
              loginType: 3,
              username: this.loginForm.username,
              password: this.loginForm.password,
              code: this.loginForm.code,
              uuid: this.loginForm.uuid,
              codeGuid: this.loginForm.codeGuid,
              platform: 'web',
              smsCode: this.loginForm.verifyCode
            }
            this.loading = true
            this.$store
              .dispatch('Login', user)
              .then(res => {
                this.loading = false
                if (res.status) {
                  this.$alert('注册账号成功', {
                    confirmButtonText: '确定',
                    callback: action => {
                      this.$router.push({
                        path: '/index'
                      })
                    }
                  });
                } else {
                  this.getCode()
                }
              })
              .catch(() => {
                this.loading = false
                this.getCode()
              })
          }
        })
      },
      handleSendSmsCode() {
        var that = this;
        if (that.countForm.isCounting) {
          return;
        }
        if (!that.loginForm.username) {
          this.$notify.error({
            title: '手机号码不能为空',
          });
          return;
        }
        if (!isvalidPhone(that.loginForm.username)) {
          this.$notify.error({
            title: '请输入正确的手机号码',
          });
          return;
        }
        that.countForm.isCounting = true;
        that.countForm.count = 60;
      },
      handleWxLogin() {

      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .my-login-container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
  }

  .my-login-main {
    padding: 0;
    position: relative;
  }

  .my-login-aside {
    padding: 0;
    margin: 0;
  }

  .right-content {
    height: 100%;
    background-size: cover;
    background-image: url(../assets/images/login_bg.png);
    background-position: center center;
    background-repeat: no-repeat;
  }

  .login-tip-title {
    border-bottom: solid 2px #46a6ff;
    line-height: 30px;
  }

  .login-wrap {
    width: 360px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -225px;
    margin-left: -180px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2)
  }

  .title {
    margin: 30px 0 10px 25px;
    text-align: left;
    font-size: 25px;
  }

  .login-form {
    margin: 0 !important;
    border-radius: 6px;
    padding: 0 15px 0 15px;
  }

  .col-right {
    height: 100%;
  }

  .col-right img {
    width: 100%;
    height: 100%;
  }

  .login-form .el-input {
    height: 39px;

    input {
      height: 39px;
    }
  }

  .login-form .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }

  .login-form .login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }

  .login-code {
    width: 33%;
    display: inline-block;
    height: 38px;
  }

  .login-code img {
    cursor: pointer;
    vertical-align: middle;
  }

  .align-right {
    text-align: right;
  }
</style>
